<template>
  <fullScreenContainer :leftList="menuList"  title="湖南省早熟油菜产业大脑" type="fullScreenContainer">
    <template slot="leftContent">
      <Panel key="jdfj11"  title="种植面积"  height="30%">
        <echartsDemo key="left1" :initData="zzmj" :initChart="topChart" title="万亩"></echartsDemo>
      </Panel>
      <Panel key="jdfj12" title="种植产量" height="35%">
        <echartDemo key="left2" :initData="zzcl" :initChart="line" title="万吨"></echartDemo>
      </Panel>
      <Panel key="jdfj13"  title="综合产值"  height="35%">
        <echartDemo key="left3" :initData="zhcl" :initChart="line" title="万元"></echartDemo>
      </Panel>
    </template>
    <template slot="rightContent">
      <Panel key="jdfj21" title="加工转化率" height="40%">
        <echartsDemo key="right1" :initData="jgzhl" :initChart="barChart" ></echartsDemo>
      </Panel>
      <Panel key="jdfj22" title="事件预警" height="60%">
        <scroll
          rowStyle="content_tr_center"
          :runSpeed="22"
          :scrollContentHeight="409"
          :columnsConfg="learDataColumnsConfg"
          :rowdata="rowdata"
        >
        </scroll>
      </Panel>

    </template>
    <template slot="fullScreenMap">
      <div class="map-page-container">
        <Map ref="Map"></Map>
      </div>
    </template>
    <template slot="centerContent">
<!--      <img class="top" :src="top">-->
      <div class="jdfj-box">
        <div class="jdfj-left-box" v-for="item,index in cygk">
          <img :src="zjnr[index]" alt="" srcset=""/>
          <div class="jdfj-right-box-1">
            <div class="right-top">
              <span class="number">{{ item.number }}</span>
              <span class="text">{{ item.unit }}</span>
            </div>
            <div class="right-bottom">
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <map-tools @projectIconChange="projectIconChange" :projectList="projectList"></map-tools>
    </template>
  </fullScreenContainer>
</template>
<script>
import Map from '@/Iframe/kcgis3x.vue'
import MapTools from '@/layout/components/Center/project.vue'
import menuList from './js/menu'
import zjnr0 from './images/zjnr0.png'
import zjnr1 from './images/zjnr1.png'
import zjnr2 from './images/zjnr2.png'
import zjnr3 from './images/zjnr3.png'
import zjnr4 from './images/zjnr4.png'

import pieChart from '../templateBigScreen/pieChart'
import topChart from '../templateBigScreen/topChart'
import barChart from '../templateBigScreen2/barChart'
import cselect from '../templateBigScreen2/Select/index.vue'
import scroll from '../templateBigScreen/scroll.vue'
import projectLayerData from "../templateBigScreen2/gisData/projectLayerData";
import industryLayerData from '../templateBigScreen2/gisData/industryLayerData';
import xzqhData from "../templateBigScreen2/gisData/qxxzqh";
import echartsDemo from "@/echartsDemo/index.vue";
import echartDemo from "@/echartsDemo/index.vue";
import line from "@/views/templateBigScreen1/line/initChart";
import { getChartData, getList } from "@/apis/bigCanolaIndex";

export default {
  components: {
    echartDemo,
    echartsDemo,
    Map,
    MapTools,
    cselect,
    scroll,
  },

  data() {
    return {
      menuList,
      projectList :[
        {name: '早熟油菜', value: '0', checked: false},
      ],
      top,
      zjnr:[zjnr0,zjnr1,zjnr2,zjnr3,zjnr4],
      zzmj: [],
      zzcl:{},
      zhcl:{},
      jgzhl:{},
      learDataColumnsConfg: [
        {
          label: '告警时间',
          prop: 'label1',
          width: '35%',
          paddingLeft: '0px',
        },
        {
          label: '告警类型',
          prop: 'label2',
          width: '25%',
          paddingLeft: '0px',
        },
        {
          label: '告警状态',
          prop: 'label3',
          width: '20%',
          paddingLeft: '0px',
        },
        {
          label: '操作',
          prop: 'label4',
          width: '20%',
          paddingLeft: '0px',
        },
      ],
      cygk: [
        {
          number: '10010',
          unit: '个',
          name: '企业数量',
        },
        {
          number: '10086',
          unit: '个',
          name: '从业人才数量',
        },
        {
          number: '10000',
          unit: '万亩',
          name: '种植面积',
        },
        {
          number: '0',
          unit: '万元',
          name: '产值',
        },
        {
          number: '0',
          unit: '%',
          name: '加工转化率',
        },
      ],


      tabs_value1: '0',
      pieChart,
      barChart,
      topChart,
      line,
      projectLayerData,
      industryLayerData,
      xzqhData,

      rowdata: [
        {
          label1:"2024-07-19 17:36:58",
          label2:"虫害预警",
          label3:"已下发",
          label4:"指令下发"
        },{
          label1:"2024-07-19 17:36:58",
          label2:"气象预警",
          label3:"已下发",
          label4:"指令下发"
        }
      ],
      cygk1: [
        {
          number: '0',
          unit: '家',
          name: '国家龙头企业',
        },
        {
          number: '0',
          unit: '家',
          name: '省级龙头企业',
        },
        {
          number: '0',
          unit: '家',
          name: '市级龙头企业',
        },
        {
          number: '1774',
          unit: '家',
          name: '其他',
        },{
          number: '1774',
          unit: '家',
          name: '其他',
        }
      ],
      orgList: [
      { label:'全省',value:''},
      { label: '长沙市',value:'长沙市'},
      { label: '株洲市',value:'株洲市'},
      { label: '湘潭市',value:'湘潭市'},
      { label: '衡阳市',value:'衡阳市'},
      { label: '邵阳市',value:'邵阳市'},
      { label: '常德市',value:'常德市'},
      { label: '张家界市',value:'张家界市'},
      { label: '益阳市',value:'益阳市'},
      { label: '郴州市',value:'郴州市'},
      { label: '永州市',value:'永州市'},
      { label: '岳阳市',value:'岳阳市'},
      { label: '怀化市',value:'怀化市'},
      { label: '娄底市',value:'娄底市'},
      ],
    }
  },
  created() {
    this.getData();
  },
  methods: {
    orgChange(value){debugger
      this.select1_value  =value;
      this.getOutputValueList();
    },
    projectIconChange(value) {
      this.showGisLayer(value, this.projectLayerData, 1);
    },
    showGisLayer(layerType, layerData, type) {
      this.clearGisLayer();
      if (layerType && layerData && layerData.length > 0) {
        const layerTypeArray = layerType.split(',').map(pid => parseInt(pid, 10));
        const layersToShow = layerTypeArray.map(pid => this.findLayerByPid(type, pid)).filter(layer => layer !== undefined);
        if (type === 0) {
          this.displayLayers(layersToShow);
        } else {
          this.displayProjectLayers(layersToShow)
        }
      }
    },


    findLayerByPid(type, pid) {
      const layerData = type === 0 ? this.industryLayerData : this.projectLayerData;
      return layerData.find(layer => layer.pid === pid);
    },

    displayProjectLayers(layers) {
      layers.forEach(layer => {
        let mergedPolygon = [];
        let htmlData = [];
        layer.xzqh.forEach(xzqhItem => {
          const multiPolygon = this.getMultiPolygonByCode(xzqhItem.code);
          const coordinates = multiPolygon.geometry.coordinates;
          const properties = multiPolygon.properties;
          const html = this.buildProjectIconHtml(xzqhItem.dbzp);
          htmlData.push({
            x: properties.x,
            y: properties.y,
            html: html
          })
          coordinates.forEach(coord => {
            mergedPolygon.push({
              polyArr: coord,
              style: {
                color: layer.material.polygon.color,
                alpha: layer.material.polygon.alpha
              }
            })
          });
        })
        this.addGisLayer(mergedPolygon, htmlData);
      })
    },

    buildProjectIconHtml(dbzp) {
      let resHtml = '';
      if (dbzp && dbzp.length) {
        dbzp.forEach((item, index1) => {
          resHtml += `<div class="label-container purple-background">
                    <img src="${item.icon}" alt="图标" class="icon">
                    <span class="label-text">${item.name}</span>
                  </div>`;
        });
      }
      return resHtml;
    },

    buildIndustryIconHtml(dbzp) {
      if (!dbzp || !dbzp.length) return '';
      const containerClass = 'label-container purple-background';
      const iconClass = 'label-icon2';
      const textClass = 'label-text2';
      return dbzp.map(item => {
        const textStyle = `background-color: ${item.color || '#FFF482'}`;
        return `
            <div class="${containerClass}">
              <img src="${item.icon}" alt="图标" class="${iconClass}">
              <span class="${textClass}" style="${textStyle}">${item.name}</span>
            </div>
          `;
      }).join('');
    },


    displayLayers(layers) {
      // 实现显示图层的逻辑
      layers.forEach(layer => {
        let mergedPolygon = [];
        let htmlData = [];
        layer.cyd.forEach(cydItem => {
          cydItem.xzqh.forEach(xzqh => {
            const multiPolygon = this.getMultiPolygonByCode(xzqh.code);
            const coordinates = multiPolygon.geometry.coordinates;
            const properties = multiPolygon.properties;
            const html = this.buildIndustryIconHtml(xzqh.dbzp);
            htmlData.push({
              x: properties.x,
              y: properties.y,
              html: html
            })
            coordinates.forEach(coord => {
              mergedPolygon.push(
                {
                  polyArr: coord,
                  style: {
                    color: cydItem.material.polygon.color || 'FCC152',
                    alpha: cydItem.material.polygon.alpha || 0.5
                  },
                  label: {
                    text: cydItem.name,
                    textStyle: {
                      fillColor: cydItem.material.label.fillColor || '#d31313',
                      outlineColor: cydItem.material.label.outlineColor || '#ffffff',
                    }
                  }
                })
            });
          })
        })
        this.addGisLayer(mergedPolygon, htmlData);
      });
    },

    addGisLayer(mergedPolygon, htmlData) {
      if (window.kcgis&& window.mapApi) {
        window.mapApi.addNativePolygon(mergedPolygon,htmlData);
      }
    },

    clearGisLayer() {
      if (window.kcgis&& window.mapApi) {
        window.mapApi.clearAllVectorLayer();
      }
    },


    getMultiPolygonByCode(code) {
      const feature = this.xzqhData.features.find(feature => feature.properties.code === code);
      if (feature) {
        return feature;
      } else {
        return null; // 如果找不到匹配的code，返回null
      }
    },
    iconChange(data) {
      this.showGisLayer(data, this.industryLayerData, 0);
    },

    getData() {
      this.getChartData1();
      this.getChartData2();
      this.getChartData3();
      this.getChartData4();
      this.getChartData5();
      this.getList1();
    },
    // 事件预警
    getList1(){
      getList({listName:'产业驾驶舱-事件预警'}).then(res => {
        if(res.data){
          this.rowdata = res.data;
        }
      });
    },
    // 种植面积
    getChartData1(){
      getChartData({chartName:'产业驾驶舱-种植面积'}).then(res => {
        if(res.data){
          let zzmj = [];
          res.data.forEach(e => {
            zzmj.push( {executeOorgname: e.name,zs: e.value});
          });
          this.zzmj = zzmj;
        }
      });
    },

    // 种植产量
    getChartData2(){
      getChartData({chartName:'产业驾驶舱-种植产量'}).then(res => {
        if(res.data){
          let data = this.formatChartData(res.data);
          this.zzcl = data;
        }
      });
    },

    // 综合产值
    getChartData3(){
      getChartData({chartName:'产业驾驶舱-综合产值'}).then(res => {
        if(res.data){
          let data = this.formatChartData(res.data);
          this.zhcl = data;
        }
      });
    },
    // 加工转化率
    getChartData4(){
      getChartData({chartName:'产业驾驶舱-加工转化率'}).then(res => {
        if(res.data){
          let data = this.formatChartData(res.data);
          data.yAxisName = '%';
          this.jgzhl = data;
        }
      });
    },

    // 中间tab
    getChartData5(){
      getChartData({chartName:'产业驾驶舱--'}).then(res => {
        if(res.data){
          let data = [];
          res.data.forEach(e => {
            data.push( {name: e.name,number: e.value,unit:e.unit});
          });
          this.cygk = data;
        }
      });
    },

    formatChartData(data) {
      let legendData = [];
      let seriesData = [];
      let result = {};
      data.forEach(e => {
        legendData.push(e.name);
        seriesData.push({ "name": e.name, "value": e.value });
      });
      result.legendData = legendData;
      result.xAxisData = legendData;
      result.seriesData = seriesData;
      return result;
    }
  },
  mounted() { },
}
</script>
<style scoped lang="scss">
.top{
  position: absolute;
  top: 2px;
  width: 909px;
  height: 71px;
  opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0px;
  row-gap: 24px;
  flex-wrap: wrap;
  align-content: flex-start;

  z-index: 999999;
}
.right{
  position: absolute;
  left: 1480px;
  width: 420px;
  height: 954.64px;
  border-radius: 5px;
  opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 24px 0px 0px 0px;
  gap: 16px;

}


.jdfj-box {
  position: absolute;
  top: 2px;
  width: 909px;
  height: 71px;
  opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0px;
  row-gap: 24px;
  flex-wrap: wrap;
  align-content: flex-start;

  z-index: 999999;
}

.jdfj-left-box {
  width: 168px;
  border-radius: 5px;
  opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 5px 8px;
  gap: 16px;

  background: linear-gradient(180deg,
    rgba(59, 214, 172, 0.1) 0%,
    rgba(59, 214, 172, 0) 100%);

  box-sizing: border-box;
  border: 1px solid rgba(124, 181, 168, 0.34);

  z-index: 0;

  .jdfj-right-box-1 {
    .right-top {
      height: 24px;
      opacity: 1;

      /* 自动布局 */
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 0px;
      gap: 8px;

      z-index: 0;

      .number {
        font-family: DIN;
        font-size: 24px;
        font-weight: bold;
        line-height: 24px;
        letter-spacing: 0em;

        font-variation-settings: 'opsz' auto;
        background: linear-gradient(180deg, #d5fff5 15%, #8cd9c5 84%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        z-index: 0;
      }

      .text {
        opacity: 0.8;
        font-family: 思源黑体;
        font-size: 14px;
        font-weight: 350;
        line-height: 14px;
        letter-spacing: 0em;

        /* 纯白 */
        color: #ffffff;

        z-index: 1;
      }
    }

    .right-bottom {
      height: 21px;
      opacity: 1;

      font-family: 思源黑体;
      font-size: 14px;
      font-weight: normal;
      line-height: normal;
      text-transform: uppercase;
      letter-spacing: 1px;

      font-variation-settings: 'opsz' auto;
      font-feature-settings: 'kern' on;
      /* 文字白 */
      color: #ffffff;

      z-index: 1;
      margin-top: 10px;
    }
  }
}

</style>
